<template>
  <div id="sales-hot-statist">
  </div>
</template>
<script>
import { piePatternSrc, bgPatternSrc } from "@/api/constant";
export default {
  data() {
    return {
      piePatternSrc: "",
    };
  },
  mounted() {
    //  var myChart = echarts.init(chartDom);
    var option;
    let myChart = this.$echarts.init(document.getElementById("sales-hot-statist"));
    var piePatternImg = new Image();
    piePatternImg.src = piePatternSrc;
    var bgPatternImg = new Image();
    bgPatternImg.src = bgPatternSrc;
    this.piePatternSrc = piePatternSrc;
    var itemStyle = {
      normal: {
        opacity: 0.7,
        color: {
          image: piePatternImg,
          repeat: "repeat",
        },
        borderWidth: 3,
        borderColor: "#235894",
      },
    };
    option = {
      backgroundColor: {
        image: bgPatternImg,
        repeat: "repeat",
      },
      title: {
        text: "饼图纹理",
        textStyle: {
          color: "#235894",
        },
      },
      tooltip: {},
      series: [
        {
          name: "pie",
          type: "pie",
          selectedMode: "single",
          selectedOffset: 30,
          clockwise: true,
          label: {
            fontSize: 18,
            color: "#235894",
          },
          labelLine: {
            lineStyle: {
              color: "#235894",
            },
          },
          data: [
            { value: 1048, name: "搜索引擎" },
            { value: 735, name: "直接访问" },
            { value: 580, name: "邮件营销" },
            { value: 484, name: "联盟广告" },
            { value: 300, name: "视频广告" },
          ],
          itemStyle: itemStyle,
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>
<style lang="scss" scoped>
#sales-hot-statist {
  margin-top: 2%;
  width: 85%;
  height: 650px;
}
</style>